const theme = {
  color: "#FFFF73",
};

async function main() {
  // 加载资源
  await loadImageAssets();
  await loadScripts();
  // 创建canvas
  const { canvas, ctx } = createCanvas();

  const world = new World(canvas);

  const beginView = new Group();

  world.add(beginView);

  const defaultBackground = new ImageShape({
    imageId: ImageNames.bg,
    x: 0,
    y: 0,
    width: canvas.width,
    height: canvas.height,
    listen: false,
  });

  beginView.add(defaultBackground);

  const beginButton = new TextShape({
    text: "开始",
    x: canvas.width / 2 - 16,
    y: canvas.height / 2,
    style: {
      color: theme.color,
    },
  });

  beginView.add(beginButton);

  const settingButton = new ImageShape({
    imageId: ImageNames.setting,
    x: canvas.width - 50,
    y: 20,
    width: 32,
    height: 32,
  });

  beginView.add(settingButton);

  const settingView = new Group();

  const settingViewBackground = new ImageShape({
    imageId: ImageNames.bg4,
    x: 0,
    y: 0,
    width: canvas.width,
    height: canvas.height,
    listen: false,
  });

  settingView.add(settingViewBackground);

  const background1 = new BorderImageShape({
    imageId: ImageNames.bg,
    x: 50,
    y: 20,
    width: canvas.width / 3,
    height: canvas.height / 3,
  });

  const background2 = new BorderImageShape({
    imageId: ImageNames.bg2,
    x: canvas.width / 3 + 30 + 50,
    y: 20,
    width: canvas.width / 3,
    height: canvas.height / 3,
  });

  const background3 = new BorderImageShape({
    imageId: ImageNames.bg3,
    x: 50,
    y: 20 + canvas.height / 3 + 20,
    width: canvas.width / 3,
    height: canvas.height / 3,
  });

  settingView.add(background1, background2, background3);

  settingButton.addEventListener("click", () => {
    [background1, background2, background3].forEach((shape) => {
      shape.border = shape.imageId === defaultBackground.imageId;
    });
    world.remove(beginView);
    world.add(settingView);
  });

  /**
   * @description 背景设置点击
   * @param {ImageShape} target
   * @param {MouseEvent} ev
   */
  const backgroundSettingClick = (target, ev) => {
    defaultBackground.setImageId(target.imageId);
    world.remove(settingView);
    world.add(beginView);
  };

  background3.addEventListener("click", backgroundSettingClick);

  background2.addEventListener("click", backgroundSettingClick);

  background1.addEventListener("click", backgroundSettingClick);

  const homeView = new Group();

  const useravatar = new ImageShape({
    imageId: ImageNames.boy,
    x: 10,
    y: 10,
    width: 48,
    height: 48,
    listen: false,
  });

  const username = new TextShape({
    text: "像素探险者",
    x: 68,
    y: 42,
    listen: false,
    style: {
      color: "#f4a460",
    },
  });

  const scoreboard = new ScoreboardShape({
    text: "0",
    x: canvas.width - 20,
    y: 42,
    listen: false,
    style: {
      color: "#9acd32",
    },
  });

  const basket = new BasketShape({
    speed: 3,
    imageId: ImageNames.basket1,
    width: 48,
    height: 48,
    x: canvas.width / 2 - 24,
    y: canvas.height - 10 - 48,
    listen: false,
  });

  homeView.add(defaultBackground, useravatar, username, scoreboard, basket);

  const fruitGroup = new MoblieGroup();

  setInterval(() => {
    fruitGroup.children = fruitGroup.children.filter((shape) =>
      isIntersecting(defaultBackground, shape)
    );
    fruitGroup.add(createFruit(canvas));
  }, 1000);

  /**
   * @type {()=>void | null}
   */
  let cancelBasketControl = null;

  beginButton.addEventListener("click", () => {
    world.remove(beginView);
    cancelBasketControl = basket.control().cancelControl;
    world.add(homeView);
    fruitGroup.add(createFruit(canvas));
    world.add(fruitGroup);
  });

  const clean = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  };

  const catchFruits = () => {
    const fruits = basket.catch(...fruitGroup.children);
    fruitGroup.children = fruitGroup.children.filter(
      (fruit) => !fruits.includes(fruit)
    );
    const value = fruits
      .map((fruit) => fruit.score)
      .reduce((total, current) => {
        return total + current;
      }, 0);
    scoreboard.increase(value);
  };

  const update = () => {
    clean();
    catchFruits();
    world.draw();
    requestAnimationFrame(update);
  };
  update();
}
main();
